<template>
  <div class="view-menu-wrapper">
    <div v-if="$scopedSlots['toolbar']" class="view-menu-wrapper-toolbar">
      <slot name="toolbar"></slot>
    </div>
    <default-menu
      :menu-list="menuList"
      :active-name="activeName"
      :opened-names="openedNames"
      @on-select="name=>$emit('on-select', name)"
    />
    <div v-if="$scopedSlots['footbar']" class="view-menu-wrapper-footbar">
      <slot name="footbar"></slot>
    </div>
  </div>
</template>

<script>
import DefaultMenu from "./components/default-menu";
export default {
  components: {
    DefaultMenu
  },
  data() {
    return {
      openedNames: [],
      activeName: ""
    };
  },
  props: ["menuList"]
};
</script>
